<template>
    <div>
        <v-snackbar
                timeout="3000"
                v-model="bar"
        >
            你还没有评论！
            <template v-slot:action="{ attrs }">
                <v-btn
                        color="pink"
                        text
                        v-bind="attrs"
                        @click="bar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>

        <img :src="data.img" style="object-fit: cover;width: 100%; height: 360px">
        <v-card style="padding: 10px">
            <center>
                <h1>{{data.title}}</h1>
                <span style="color: gray">
                    作者：{{author.name}} | 简介：{{data.des}}
                </span>
            </center>
            <md-atc :text="data.text"></md-atc>
            <v-divider></v-divider>
            <br/>
            <div>
                <v-row style="font-weight: bold; font-size: medium">
                    <v-col cols="12"
                           lg="6">
                        <v-row>
                            <v-col cols="12" sm="4">
                                发布时间：
                                <span style="color: orange">
                                    {{data.theTime}}
                                </span>
                            </v-col>
                            <v-col cols="12" sm="4">
                                标签：
                                <span style="color: orange">
                                    {{data.tag}}
                                </span>
                            </v-col>
                            <v-col cols="12" sm="4">
                                浏览量：
                                <span style="color: orange">
                                    {{data.views}}
                                </span>
                            </v-col>
                        </v-row>
                    </v-col>
                    <v-col cols="12"
                           lg="6" v-if="isLogin">
                        <v-row>
                            <v-col cols="4" sm="4">
                                <v-btn
                                        fab
                                        dark
                                        small
                                        color="pink"
                                        @click="like"
                                >
                                    <v-icon dark>
                                        mdi-thumb-up
                                    </v-icon>
                                </v-btn>
                                <span style="margin-left: 10px">
                                    {{data.likes}}
                                </span>
                            </v-col>
                            <v-col cols="4" sm="4">
                                <v-btn
                                        fab
                                        dark
                                        small
                                        color="orange"
                                        @click="light"
                                >
                                    <v-icon dark>
                                        mdi-candle
                                    </v-icon>
                                </v-btn>
                                <span style="margin-left: 10px">
                                    {{data.lights}}
                                </span>
                            </v-col>
                            <v-col cols="4" sm="4">
                                <v-btn
                                        fab
                                        dark
                                        small
                                        color="cyan"
                                        @click="favor"
                                >
                                    <v-icon dark>
                                        mdi-star
                                    </v-icon>
                                </v-btn>
                                <span style="margin-left: 10px">
                                    {{data.favors}}
                                </span>
                            </v-col>
                        </v-row>
                    </v-col>
                    <v-col cols="12"
                           lg="6" v-if="!isLogin">
                        <center>
                            <v-alert
                                    text
                                    width="80%"
                                    color="blue"
                                    type="info"
                            >登录以使用更多功能</v-alert>
                        </center>
                    </v-col>
                </v-row>
            </div>
        </v-card>
        <br/>
        <v-card style="padding: 10px" v-if="!isLogin">
            <strong style="font-size: x-large">
                评论
            </strong>
            <v-divider></v-divider>
            <br/>
            <v-btn outlined target="_blank" color="primary" href="/login"> 登 录 <v-icon small>mdi-login</v-icon> </v-btn>
            <v-btn outlined target="_blank" color="primary" href="/sign" style="margin-left: 20px"> 注 册 <v-icon small>mdi-account-plus-outline</v-icon> </v-btn>
        </v-card>
        <v-card style="padding: 10px" v-if="isLogin">
            <strong style="font-size: x-large">
                评论
            </strong>
<!--            Form-->
            <div>
                <v-textarea
                        dense
                        outlined
                        label="输入评论..."
                        v-model="cmt.text"
                ></v-textarea>
                <v-row style="margin-right: 20px; margin-left: 20px">
                    <span>文明评论</span>
                    <v-spacer></v-spacer>
                    <v-btn color="info" depressed>
                        <span style="font-size: medium" @click="doCmt">发 送</span>
                    </v-btn>
                </v-row>
            </div>
            <br/>
<!--            comment-->
            <div>
                <div v-for="i in cmts" :key="i.content.id">
                    <v-divider></v-divider>
                    <div style="margin: 10px">
                        <c-cmt :data="i"></c-cmt>
                        <a style="color: gray;text-decoration: none;font-size: small" @click="reply(i)">回复</a>
<!--                        Reply-->
                        <div v-for="o in repls" :key="o.content.id" v-if="o.content.belong==i.content.id" style="margin-left: 25px">
                            <c-repl :data="o"></c-repl>
                            <a style="color: gray;text-decoration: none;font-size: small" @click="subReply(i, o)">回复</a>
                        </div>
                        <div v-if="repl.belong==i.content.id">
                            <v-textarea
                                    dense
                                    outlined
                                    :label="'@'+tname"
                                    v-model="repl.text"
                            ></v-textarea>
                            <v-row style="margin-right: 20px; margin-left: 20px">
                                <span>文明评论</span>
                                <v-spacer></v-spacer>
                                <v-btn color="error" depressed tile @click="cancelRepl">
                                    <span style="font-size: medium">取消</span>
                                </v-btn>
                                <v-btn color="primary" depressed tile style="margin-left: 10px" @click="doRepl">
                                    <span style="font-size: medium">发 送</span>
                                </v-btn>
                            </v-row>
                            <br/>
                        </div>
                    </div>
                </div>
                <v-divider></v-divider>
            </div>
        </v-card>
        <center style="margin-top: 10px">
            <span style="font-size: medium">
                本文链接： <a :href="url">{{url}}</a>
            </span>
        </center>
        <br/>
    </div>
</template>

<script>
    import marked from 'marked'
    export default {
        name: "Article",
        data(){
            return{
                url: window.location.href,
                data: '',
                cmt: {
                    text: '',
                    belong: this.$route.params.pathMatch
                },
                cmts: '',
                repl: {
                    text: '',
                    belong: -1,
                    tid: -1,
                    aid: this.$route.params.pathMatch,
                },
                repls: '',

                bar: false,
                author: '',
                aid: this.$route.params.pathMatch,

                tname: '',
                isLogin: false,
            }
        },
        created() {
            this.getUser().then(function (resp) {
                if (resp.data!=''){
                    t.isLogin = true;
                }
            })

            const t = this;
            this.getAtcBy(t.aid).then(function (resp) {
                t.data = resp.data;
                t.data.text = marked(t.data.text);
                t.getUserBy(t.data.uid).then(function (resp) {
                    t.author = resp.data;
                })
            })
            this.getData2();
        },
        methods:{
            cancelRepl(){
                this.repl.belong=-1
                this.repl.tid=-1;
                this.repl.text='';
                this.tname = '';
            },
            reply(i) {
                this.tname = i.u.name;
                i = i.content;
                this.repl.belong=i.id
                this.repl.tid=i.uid;
            },
            subReply(i, o){
                this.tname = o.uu.name;
                i = i.content;
                o = o.content;
                this.repl.belong=i.id;
                this.repl.tid=o.uid;
            },
            getData2(){
                const t = this;
                this.getCmt(t.aid).then(function (resp) {
                    t.cmts = resp.data;
                })
                this.getReply(t.aid).then(function (resp) {
                    t.repls = resp.data;
                })
            },
            doCmt(){
                const t = this;
                if (t.cmt.text.match(/^\s*$/)) {
                    t.bar = true;
                    return;
                }
                this.sendCmt(t.cmt).then(function () {
                    t.cmt.text='';
                    t.getData2();
                })
            },
            doRepl(){
                const t = this;
                if (t.repl.text.match(/^\s*$/)) {
                    t.bar = true;
                    return;
                }
                this.sendRepl(t.repl).then(function () {
                    t.cancelRepl();
                    t.getData2();

                })
            },
            like(){
                const t = this;
                this.likeAtc(t.aid).then(function (resp) {
                    if (resp.data){
                        t.data.likes++;
                    } else{
                        alert('你已经赞了这篇文章');
                    }
                })
            },
            favor(){
                const t = this;
                this.favorAtc(t.aid).then(function (resp) {
                    if (resp.data){
                        t.data.favors++;
                    } else{
                        alert('你已经收藏了这篇文章');
                    }
                })
            },
            light(){
                const t = this;
                this.lightAtc(t.aid).then(function (resp) {
                    if (resp.data){
                        t.data.lights++;
                    } else{
                        alert('你已经点亮了这篇文章 或 你没有足够的蜡烛');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>